<template>
  <div class="search">
    <van-nav-bar left-text="返回" left-arrow @click-left="back">
      <template #right>
        <van-search
          v-model="keyword"
          placeholder="输入咖啡饮品"
          shape="round"
          @search="search"
        />
      </template>
    </van-nav-bar>
    <van-row class="bg">
      <GoodsList
        v-for="item in searchList"
        @intoDetail="intoDetail"
        :key="item.pid"
        :item="item"
      ></GoodsList>
    </van-row>
  </div>
</template>

<script>
import "../assets/less/search.less";
import GoodsList from "../components/GoodsList.vue";
export default {
  name: "Search",
  components: {
    GoodsList,
  },
  data() {
    return {
      keyword: "",
      searchList: [],
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    intoDetail(pid) {
      return this.$router.push({
        name: "Details",
        params: { pid },
      });
    },
    search(keyword) {
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      if (!keyword == "") {
        this.$axios({
          method: "GET",
          url: "/search",
          params: {
            appkey: this.appkey,
            name: keyword,
          },
        })
          .then((res) => {
            // console.log("res search ==> ", res);
            this.$toast.clear();

            if (res.data.code === "Q001") {
              this.searchList = res.data.result;
              // console.log("this.searchList==>", this.searchList);
            } else {
              this.$toast({
                message: res.data.msg,
                forbidClick: true,
                duration: 1000,
              });
            }
          })
          .catch((err) => {
            this.$toast.clear();
            console.log("err ==> ", err);
          });
      } else {
        this.searchList = [];
        this.$toast({
          message: "关键词不能为空！",
          forbidClick: true,
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>